
/**
 * @author zzz
 * @description 用于显示头像时间昵称
 */

import {FC, ReactNode } from "react";
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { Image } from "antd-mobile";
const CBN = classnames.bind(style)
type MsgBasicInfoType = {
    children: ReactNode
    position: 'left' | 'right',
    head: string,
    nickname: string,
    time: string,
}

const MsgBasicInfo: FC<MsgBasicInfoType> = ({ children, ...info }) => {
    const { position, head, nickname, time} = info
    const combineCls = {
        'MsgBasicInfo': true,
        'left': position === 'left',
        'right': position === 'right'
    }
    return <div className={CBN(combineCls)} >
        <div className={CBN('basicinfo')}>
            <div className={CBN('top')}>
                <div>{time}</div>
                {/* <div style={{marginLeft:'10px'}}>{nickname}</div> */}
            </div>  
            <div className={CBN('infobox')}>
                {children}
            </div>
        </div>
        <div className={CBN('headimg')}>
            <div className={CBN('nickname')}>{nickname}</div>
            <Image
                src={head}
                width={40}
                height={40}
                fit='cover'
                style={{ borderRadius: 20 }}
            />
        </div>
    </div>
}

export default MsgBasicInfo